<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>iScroll iPad example</title>
          <link rel="stylesheet" href="css/style.css">
          <script src="js/libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/iscroll-wrapper.js"></script>

<script src="phonegap-1.2.0.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/iscroll.css"> 
<link rel="stylesheet" href="css/login.css"> 
  <script>
   function addpic()
  {
       navigator.camera.getPicture(onPhotoDataSuccess, onFail, 
                { quality : 100, 
                destinationType : Camera.DestinationType.DATA_URL, 
                sourceType : Camera.PictureSourceType.CAMERA, 
                allowEdit : true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 220,
                targetHeight: 300 }
                );
      
  }
  function onPhotoDataSuccess(imageData) {

      $('#img-profile').attr('src','data:image/jpeg;base64,'+imageData); 

       

    }
 </script>
</head>
<body>

<div id="page">
    <div id="sidebar">
        <header>Menu</header>
        <nav>
                            <a href="javascript:void(0);"><img id="img-profile" onclick="addpic()" src="images/img-avatar.jpg" alt="img-avatar" /></a>
           <h3>Feature</h3>
           <ul id="navScroller" class="v">
                       <li><a href="forum.html" class="icon">Forum</a></li>
                      <li><a href="index.html" class="icon">Calendar</a></li>
                      <li><a href="message.html" class="icon">Private Message</a></li>
                      <li><a href="meetingroom.html" class="icon">Meeting Room</a></li>
                      <li><a href="download.html" class="icon">Document Download</a></li>
                      <li><a href="logout.html" class="icon">Log Out</a></li>
                  </ul>
        </nav>
    </div>

    <div id="content">
        <header>Message Chat</header>
        <article>
            <div id="contentScroller">
                <div id="comment">
                      
                      
                             <ol class="commentlist" id="commentlist">
                        
                        
                        
                        
                                
                            </ol>
                      
                      
                      

                         <div id="respond">

                              
                                        
                                        
                                        <form id="commentform" method="post" action="">
 
                                        
                                        <!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->
                                        <br>

                                        <p>&nbsp;&nbsp;<strong>Message</strong><textarea tabindex="4" rows="10" cols="100%" id="commenttext" name="commenttext"></textarea></p>
                                        
                                        <p><input type="button" onClick="setmsg()" value="Send" tabindex="5" id="submit" name="submit">
                                       
                                        </p>
                                        
                                        </form>
                                        
                                        </div>
                            
                            
                      </div>    
                      

            </div>
        </article>
    </div>
</div>
<script src="js/default/login.js"></script>
 <script src="js/default/msg.js"></script>

<script type="text/javascript">
var scrollContent;
var scrollSide;

function loaded() {
  //  scrollContent = new iScroll('contentScroller');
    scrollSide = new iScroll('navScroller');
    
    getmsg();
    
    var elem = $('#contentScroller');
        elem.iscroll();
        elem.bind('onScrollEnd', function(e, iscroll){
         //   alert($(this).attr('id') +' - '+ iscroll);
        });
}

document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

</body>
</html>